<template>
  <div class="app-container">
    <div class="pr-40">
      <z-form :data="data" :formProps="formProps" :fields="fields"></z-form>
      <div class="text-right" v-if="$route.query.isEdit">
        <el-button type="primary" @click.native="submitMain(false)" :loading="submitLoading">{{orderId?'确定':"新增"}}
        </el-button>
        <el-button type="warning" @click.native="submitMain(true)" :loading="submitLoading">确定并新增明细
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
import dayjs from 'dayjs'
import _ from 'lodash'
export default {
  mixins: [commonMixin],
  name: 'tab2',
  props: {
    orderId: {
      type: String,
      default: '',
    },
    orderNo: {
      type: String,
      default: '',
    },
    currentTab: {
      type: String,
      default: 'tab1',
    },
    isEdit: {
      type: String,
      default: 'false',
    },
    openDetailDialog: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    orderId: {
      handler(n) {
        this.research()
        this.data = _.cloneDeep(this.initData)
        let tmp = this.fields.find((i) => i.key == 'is_finished')
        if (!!n) {
          this.getMainDetail(n)
          tmp.hidden = false
        } else {
          tmp.hidden = true
        }
      },
      deep: true,
      immediate: true,
    },
    isEdit: {
      handler(n) {
        this.formProps.disabled = this.isEdit == 'true' ? false : true
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      initData: { order_date: dayjs().format('YYYY-MM-DD'), is_finished: '0' },
      data: {},
      formProps: {
        dialogWidth: '100%',
        labelWidth: '100px',
        disabled: false,
        // title:null, //dialog title
      },
      fields: [
        {
          title: '单据类型',
          key: 'order_type_id',
          name: 'select',
          options: [],
          props: {
            filterable: true,
            remote: true,
            remoteMethod: this.getDocTypeOptions,
          },
          required: true,
          span: 12,
        },
        { title: '单号', key: 'order_no', required: true, span: 12 },
        {
          title: '客户',
          key: 'cust_id',
          name: 'select',
          options: [],
          props: {
            filterable: true,
            remote: true,
            remoteMethod: this.getcustOptions,
          },
          span: 12,
        },
        {
          title: '供应商',
          key: 'vendor_id',
          name: 'select',
          options: [],
          props: {
            filterable: true,
            remote: true,
            remoteMethod: this.getvendorOptions,
          },
          span: 12,
        },
        { title: '单据日期', key: 'order_date', required: true, name: 'date', span: 12 },
        {
          title: '完成状态',
          key: 'is_finished',
          name: 'select',
          hidden: false,
          options: [
            { label: '已完成', value: '1' },
            { label: '未完成', value: '2' },
            { label: '未开始', value: '0', disabled: true },
          ],
          props: { disabled: false },
          span: 12,
        },
        { title: '备注', key: 'remarks', props: { rows: 3 }, name: 'textarea', span: 24 },
      ],
    }
  },
  methods: {
    research() {
      this.data = {}
      this.initStatus = {}
      this.getDocTypeOptions()
      this.getcustOptions()
      this.getvendorOptions()
    },
    getMainDetail(id) {
      if (!id) {
        this.data = _.cloneDeep(this.initData)
        return
      }
      let url = this.$api.order + 'getbyid?order=' + id
      this.$request(url).then((r) => {
        this.data = r
        this.$emit('update:orderNo', r.order_no)
        this.getcustOptions(r.cust_name)
        this.getvendorOptions(r.vendor_name)
        this.getDocTypeOptions(r.type_name)
      })
    },
    // 主表完成
    submitMain(flag) {
      let data = this.formatBeforeSave(this.data)
      let check = this.validataData(this.fields, data)
      if (!check) return
      data['id'] = this.orderId
      this.$request(this.$api.order + 'add', data, 'post').then((r) => {
        this.$message.success('操作成功')
        if (!this.orderId) {
          this.$emit('update:orderId', r)
        }
        if (flag) {
          this.$emit('update:currentTab', 'tab2')
          this.$emit('update:openDetailDialog', true)
        } else {
          this.$router.go(-1)
        }
      })
    },
    tabClick(v) {},
    // // 远程搜索
    getDocTypeOptions(v) {
      this.setFieldOptions('order_type_id', [])
      this.$request(this.$api.ordertype + 'getlist', {
        queryString: v,
        page: 1,
        size: 100,
      })
        .then((r) => {
          this.setFieldOptions('order_type_id', r.list, 'id', ['code', 'name'])
        })
        .catch(() => {})
    },
    // 客户
    getcustOptions(val) {
      this.setFieldOptions('cust_id', [])
      this.$request(this.$api.custom + 'getlist', {
        queryString: val,
        page: 1,
        size: 100,
      })
        .then((r) => {
          this.setFieldOptions('cust_id', r.list, 'id', ['cust_code', 'cust_name'])
        })
        .catch(() => {})
    },
    // 供应商远程搜索
    getvendorOptions(val) {
      this.setFieldOptions('vendor_id', [])
      this.$request(this.$api.vendor + 'getlist', {
        page: 1,
        size: 100,
        queryString: val ? val : '',
      }).then((r) => {
        this.setFieldOptions('vendor_id', r.list, 'id', ['vendor_code', 'vendor_name'])
      })
    },
    getSkuOptions(query) {
      let tmp = this.fieldsDetail.find((x) => x.key == 'material_id')
      tmp.options = []
      if (query) {
        this.$request(this.$api.mat + 'getmatandsku', { queryString: query })
          .then((r) => {
            tmp.options = r.map((i) => {
              return {
                value: i.id,
                label: i.key_part_no + '  ' + i.key_part_name,
              }
            })
          })
          .catch(() => {})
      }
    },
  },
}
</script>

<style>
</style>